<template>
  <div id="app">
  <div class="nav-box">
        <ul class="nav">
          <router-link to="/" exact tag="li">
            <i class="fa fa-home"></i>
            <span>home</span>
          </router-link>
          <router-link to="/user"  tag="li" >
              <i class="fa fa-home"></i>
              <span>user</span>
          </router-link>
          <router-link to="/about"  tag="li">
              <i class="fa fa-home"></i>
              <span>about</span>
          </router-link>
          <router-link to="/document#abc"  tag="li" >
              <i class="fa fa-home"></i>
              <span>document</span>
          </router-link>
        </ul>
  </div>

  当前下标为:{{$route.meta.index}}

  <transition :name="names" mode="out-in">
      <router-view/>
  </transition>  

    
    
  </div>
</template>

<script>
export default {
  name: "App",

  watch: {
    $route(to, from) {
      // console.log(to.meta.index);
      // console.log(from.meta.index);

      if (to.meta.index < from.meta.index) {
        this.names = "right";
      } else {
        this.names = "left";
      }
    }
  },

  data() {
    return {
      names: "left"
    };
  }
};
</script>

<style>
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: 1s;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: 1s;
}

.left-enter {
  transform: translateX(100%);
}

.left-enter-active,
.left-leave-active {
  transition: 1s;
}

.left-leave-to {
  transform: translateX(-100%);
}

.right-enter {
  transform: translateX(-100%);
}

.right-enter-active,
.right-leave-active {
  transition: 1s;
}

.right-leave-to {
  transform: translateX(100%);
}
</style>
